/* eslint-disable */
import React from 'react';
import { connect } from 'react-redux';
import './index.css';
import lIcon from '../../assets/images/home/index/place-s.png';
import markAllIcon from '../../assets/images/home/index/map-site-h-s.png';
import markIcon from '../../assets/images/home/index/mapsite-s.png';
const AMap = window.AMap;

class WebMap extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            mapPoints: [
                { lon: '115.95', lat: '38.88', text: '0mm', isAll: false },
                { lon: '115.95', lat: '38.95', text: '13mm', isAll: false },
                { lon: '115.98', lat: '38.95', text: '13mm', isAll: false },
                { lon: '116', lat: '38.9', text: '1mm', isAll: true },
                { lon: '116', lat: '38.88', text: '1mm', isAll: false },
                { lon: '116.08', lat: '38.89', text: '1mm', isAll: false },
            ]
        }
        this.center = [116, 38.9];
        this.map = null;
        this.geolocation = null;
    }
    
    componentDidMount(){
        this.initMap();
        this.initRainSite();
    }

    UNSAFE_componentWillReceiveProps(nextProps){
        nextProps.location && this.geolocation.getCurrentPosition();
        // nextProps.showRainSite && this.initRainSite();
    }

    //初始化地图
    initMap(){
        const that = this;
        this.map = new AMap.Map('mapContainer', {
            resizeEnable: true, 
            zoom:11, //级别
            center: [116, 38.9],//中心点坐标
            viewMode:'2D', //使用3D视图
            lang: 'zh_cn' // 设置地图语言类型
        });
        AMap.plugin('AMap.Geolocation', function () {
            that.geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(15, 120),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: false,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                buttonDom: '', //自定义按钮的内容
                markerOptions: { //定位点Marker的配置
                    icon: new AMap.Icon({
                        size: new AMap.Size(25, 22),    // 图标尺寸
                        image: lIcon  // Icon的图像
                    })
                }, 
                zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            that.map.addControl(that.geolocation);
            // AMap.event.addListener(geolocation, 'complete', function(data){ that.props.setLocationStyle(); });//返回定位信息
            // AMap.event.addListener(geolocation, 'error', function(data){ that.props.setLocationStyle(); });      //返回定位出错信息
        });
    }

    //加载降雨站点
    initRainSite(){
        const { mapPoints } = this.state;
        if(mapPoints && mapPoints.length > 0){
            const markerList = mapPoints.map(item => {
                return new AMap.Marker({
                    position: new AMap.LngLat(item.lon, item.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    offset: item.isAll ? new AMap.Pixel(-9, -21) : new AMap.Pixel(-7, -16),
                    icon: new AMap.Icon({
                        size: item.isAll ? new AMap.Size(18, 21) : new AMap.Size(14, 16),    // 图标尺寸
                        image: item.isAll ? markAllIcon : markIcon,  // Icon的图像
                    }),
                    label: {
                        content: item.text,
                        direction: 'bottom'
                    }
                });
            });
            this.map.add(markerList);
        }
    }

    render() {
        return (
            <div className="map" id="mapContainer"></div>
        )
    }
}

export default connect((store) => {
    return store;
})(WebMap);